<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <script src="../res/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">视频列表</div>
        <div class="layui-card-body">
            <table id="videolist" lay-filter="videoFilter"></table>
        </div>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //获取模块对象
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;

        table.render({
            elem: '#videolist',
            url: '/video/list',
            size: 'sm',
            page: {
                limit: 2,
                limits: [5, 10, 15, 20]
            },
            cols: [[
                {field: 'uid', title: 'UID', hide: true}, // 隐藏UID列
                {field: 'cid', title: 'CID', hide: true}, // 隐藏CID列
                {type: 'checkbox'},
                {title: '序号', type: 'numbers'},
                {title: '封面图', templet: '<div><img src="{{d.coverimg}}" alt=""></div>'},
                {title: '标题', field: 'title'},
                {title: '频道', templet: '<div>{{d.category.name}}</div>'},
                {title: '作者', templet: '<div>{{d.user ? d.user.username : "未设置"}}</div>'},
                {
                    title: '发布时间',
                    width: 180,
                    templet: '<div>{{layui.util.toDateString(d.createtime, "yyyy年MM月dd日 HH:mm:ss")}}</div>'
                },
                {title: '标签', field: 'tags'},
                {title: '观看数', field: 'viewcount'},
                {title: '点赞数', field: 'lovecount'},
                {title: '收藏数', field: 'favcount'},
                {title: '转发数', field: 'forward'},
                {
                    title: '状态', templet: function (d) {
                        if (d.status === 0) {
                            return '<span class="layui-badge layui-bg-orange">审核中</span>'
                        } else if (d.status === 1) {
                            return '<span class="layui-badge layui-bg-red">审核失败</span>'
                        } else {
                            return '<span class="layui-badge layui-bg-green">审核通过</span>'
                        }
                    }
                },
                {title: '操作', templet: '#rowTools', width: 240},  // 自定义行工具栏
            ]],
            toolbar: '#toolbar',   //自定义头工具栏
        });

        //为表头绑定事件
        table.on('toolbar(videoFilter)', function (obj) {
            let layEvent = obj.event
            if (layEvent === 'dels') {
                layer.msg('批量删除......')
                var checkStatus = table.checkStatus('videolist');
                var ids = checkStatus.data.map(function (item) {
                    return item.id;
                });

                if (ids.length === 0) {
                    layer.msg('请先选择要删除的视频');
                    return;
                }

                layer.confirm('确认删除选中的视频吗？', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: '/video/deleteBatch',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(ids), // selectedIds 是要删除的视频ID数组
                        success: function(response) {
                            if (response.code === 0) {
                                layer.msg('批量删除成功');
                                // 重新加载表格或页面
                            } else {
                                layer.msg('批量删除失败: ' + response.message);
                            }
                        },
                        error: function(error) {
                            console.log('删除错误:', error);
                            layer.msg('批量删除失败');
                        }
                    });
                    layer.close(index);
                });

            } else if (layEvent === 'search') {
                layer.msg('视频检索')
                // 搜索按钮点击事件
                var keyword = $('#keyword').val().trim();

                if (keyword) {
                    $.ajax({
                        url: '/video/search',
                        type: 'GET',
                        data: {keyword: keyword},
                        success: function (response) {
                            if (response.success) {
                                // 更新表格数据
                                table.reload('videolist', {
                                    url: '/video/search', // 重新请求搜索接口
                                    where: {keyword: keyword}, // 传递搜索关键字
                                    page: {curr: 1} // 重置分页
                                });
                                layer.msg('搜索完成');
                            } else {
                                layer.msg('搜索失败：' + response.message);
                            }
                        },
                        error: function () {
                            layer.msg('搜索失败，请稍后再试');
                        }
                    });
                } else {
                    layer.msg('请输入关键词');
                }
            }
        });


        //为表格行绑定事件
        table.on('tool(videoFilter)', function (obj) {
            //获取被点击单元格元素的lay-event属性值（用于鉴别具体被点击的按钮）
            let layEvent = obj.event
            //获取当前行数据
            let rowData = obj.data
            // 根据不同的事件名称，执行对于的交互处理
            switch (layEvent) {
                case 'details':
                    // 在此处输入 layer 的任意代码
                    layer.open({
                        type: 1, // page 层类型
                        //area: ['500px', '300px'],
                        title: '视频详情',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: true, // 允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        btn: ['关闭'],  //自定义按钮
                        // btnAlign: 'c',  // 设置按钮的显示位置
                        content: $('#video-details-dialog'),   //绑定具体的DOM组件
                        success: function (layero) {   //当弹出层成功显示之后回调
                            //将弹出层中表格th内容设置居中显示
                            layero.find('th').css('text-align', 'center')
                            // 为弹出层中的内容，绑定数据
                            layero.find('#title').text(rowData.category.name)
                            layero.find('#category').text(rowData.category.name)
                            layero.find('#author').text(rowData.user ? rowData.user.username : '未设置')
                            // 显示封面
                            layero.find('#coverImg').prop('src', rowData.coverimg)
                            layero.find('#preview').prop('src', rowData.url)

                            layero.find('#tags').text(rowData.tags)
                            layero.find('#viewcount').text(rowData.viewcount)
                            layero.find('#lovecount').text(rowData.lovecount)
                            layero.find('#favcount').text(rowData.favcount)
                            layero.find('#forward').text(rowData.forward)
                            layero.find('#releaseTime').text(util.toDateString(rowData.releasetime, 'yyyy-MM-dd HH:mm:ss'))
                            layero.find('#status').text(rowData.status === 0 ? '审核中' : rowData.status === 1 ? '审核失败' : '审核通过')
                            layero.find('#summary').text(rowData.summary)

                        }
                    });
                    break
                case 'edit':
                    // todo 编辑
                    layer.open({
                        type: 1, // page 层类型
                        title: '编辑视频',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: true, // 允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: $('#video-edit-dialog'),   //绑定具体的DOM组件
                        success: function (layero) {   //当弹出层成功显示之后回调
                            //将弹出层中表格th内容设置居中显示
                            layero.find('th').css('text-align', 'center')
                            // 为弹出层中的内容，绑定数据
                            layero.find('#edit-title').val(rowData.title)
                            layero.find('#edit-category').val(rowData.category.name)
                            layero.find('#edit-author').val(rowData.user ? rowData.user.username : '未设置')
                            layero.find('#edit-coverImg').prop('src', rowData.coverimg)
                            layero.find('#edit-preview').prop('src', rowData.url)
                            layero.find('#edit-tags').val(rowData.tags)
                            layero.find('#edit-viewcount').val(rowData.viewcount)
                            layero.find('#edit-lovecount').val(rowData.lovecount)
                            layero.find('#edit-favcount').val(rowData.favcount)
                            layero.find('#edit-forward').val(rowData.forward)
                            layero.find('#edit-releaseTime').val(util.toDateString(rowData.releasetime, 'yyyy-MM-dd HH:mm:ss'))
                            layero.find('#edit-status').val(rowData.status)
                            layero.find('#edit-summary').val(rowData.summary)

                            form.render();

                            // 处理封面图片上传
                            layero.find('#edit-coverImg').on('click', function () {
                                layero.find('#edit-coverImg-input').click();
                            });

                            layero.find('#edit-coverImg-input').on('change', function (event) {
                                var file = event.target.files[0];
                                var reader = new FileReader();
                                reader.onload = function (e) {
                                    layero.find('#edit-coverImg').prop('src', e.target.result);
                                };
                                reader.readAsDataURL(file);
                            });

                            // 保存按钮点击事件
                            layero.find('#save-button').on('click', function () {
                                var editedData = {
                                    title: layero.find('#edit-title').val(),
                                    category: layero.find('#edit-category').val(),
                                    author: layero.find('#edit-author').val(),
                                    coverimg: layero.find('#edit-coverImg').prop('src'),
                                    url: layero.find('#edit-preview').prop('src'),
                                    tags: layero.find('#edit-tags').val(),
                                    viewcount: layero.find('#edit-viewcount').val(),
                                    lovecount: layero.find('#edit-lovecount').val(),
                                    favcount: layero.find('#edit-favcount').val(),
                                    forward: layero.find('#edit-forward').val(),
                                    //releasetime: layero.find('#edit-releaseTime').val(),
                                    status: layero.find('#edit-status').val(),
                                    summary: layero.find('#edit-summary').val(),
                                    uid: rowData.uid,
                                    cid: rowData.cid
                                };

                                console.log(editedData)

                                $.ajax({
                                    url: '/video/update',
                                    type: 'POST',
                                    contentType: 'application/json',
                                    data: JSON.stringify(editedData),
                                    success: function (response) {
                                        if (response.code === 0) {
                                            layer.msg('视频更新成功');
                                            table.reload('videolist');
                                        } else {
                                            layer.msg('视频更新失败: ' + response.message);
                                        }
                                    },
                                    error: function (error) {
                                        console.log('更新错误:', error);
                                        layer.msg('视频更新失败');
                                    }
                                });
                                layer.closeAll(); // 关闭弹出层
                            });
                        }
                    });
                    break;
                case 'del':
                    // todo 删除
                    layer.confirm('确认删除该视频吗？', {icon: 3}, function (index) {
                        $.ajax({
                            url: '/video/delete',
                            type: 'POST',
                            data: {id: rowData.id},
                            success: function (result) {
                                if (result.code === 0) {
                                    layer.msg('删除成功', {icon: 1});
                                    table.reload('videolist');
                                } else {
                                    layer.msg(result.msg, {icon: 2});
                                }
                            }
                        })
                    })
                    break
            }
        })
    })


</script>
<!--自定义头工具栏-->
<script id="toolbar" type="text/html">
    <div class="layui-inline">
        <button class="layui-btn layui-btn-danger" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" class="layui-input" id="keyword" placeholder="请输入查询关键字">
        </div>
        <button class="layui-btn layui-btn-normal" lay-event="search" id="search-btn">
            <i class="layui-icon layui-icon-search"></i>
            搜索
        </button>
    </div>
</script>
<!--自定义行工具栏-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-about"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

<!--&lt;!&ndash;试听按钮的页面模板&ndash;&gt;-->
<!--<script id="preview" type="text/html">-->
<!--    <button class="layui-btn layui-btn-normal layui-btn-xs preview-btn" lay-event="playOrPause" data-playing="0"-->
<!--            data-src="{{d.path}}">-->
<!--        <i class="layui-icon layui-icon-play"></i>-->
<!--    </button>-->
<!--</script>-->


<!--视频详情弹层-->
<div id="video-details-dialog" style="display: none;padding: 20px">
    <table class="layui-table" lay-even>
        <tr>
            <th colspan="7" style="height: 240px">
                <video id="preview" src="" height="100%" controls></video>
            </th>
        </tr>
        <tr>
            <td rowspan="3"><img src="" id="coverImg" width="100px" alt=""></td>
            <td>标题:</td>
            <td id="title">xxx</td>
            <td>频道:</td>
            <td id="category">xxxx</td>
            <td>作者:</td>
            <td id="author">xxxx</td>
        </tr>
        <tr>
            <td class="layui-elip">标签：</td>
            <td id="tags" class="layui-elip">xxxx</td>
            <td class="layui-elip">发布时间</td>
            <td id="releaseTime" class="layui-elip">xxxx</td>
            <td>观看数</td>
            <td id="viewcount">xxxx</td>
        </tr>
        <tr>
            <td>点赞</td>
            <td id="lovecount">xxx</td>
            <td>收藏</td>
            <td id="favcount">xxxx</td>
            <td>转发</td>
            <td id="forward">xxxx</td>
        </tr>
        <tr>
            <td colspan="7">视频详情</td>
        </tr>
        <tr>
            <td colspan="7" id="summary"></td>
        </tr>
    </table>
</div>

<!--视频编辑弹层-->
<div id="video-edit-dialog" style="display: none; padding: 20px">
    <form class="layui-form">
        <table class="layui-table" lay-even>
            <tr>
                <th colspan="7" style="height: 240px">
                    <video id="edit-preview" src="" height="100%" controls></video>
                </th>
            </tr>
            <tr>
                <td rowspan="3">
                    <img src="" id="edit-coverImg" width="100px" alt="">
                    <input type="file" id="edit-coverImg-input" style="display: none;">
                </td>
                <td>标题:</td>
                <td><input type="text" id="edit-title" class="layui-input" value="xxx"></td>
                <td>频道:</td>
                <td><input type="text" id="edit-category" class="layui-input" value="xxxx"></td>
                <td>作者:</td>
                <td><input type="text" id="edit-author" class="layui-input" value="xxxx"></td>
            </tr>
            <tr>
                <td class="layui-elip">标签：</td>
                <td><input type="text" id="edit-tags" class="layui-input" value="xxxx"></td>
                <td class="layui-elip">发布时间</td>
                <td><input type="text" id="edit-releaseTime" class="layui-input" value="xxxx"></td>
                <td>观看数</td>
                <td><input type="number" id="edit-viewcount" class="layui-input" value="xxxx"></td>
            </tr>
            <tr>
                <td>点赞</td>
                <td><input type="number" id="edit-lovecount" class="layui-input" value="xxx"></td>
                <td>收藏</td>
                <td><input type="number" id="edit-favcount" class="layui-input" value="xxxx"></td>
                <td>转发</td>
                <td><input type="number" id="edit-forward" class="layui-input" value="xxxx"></td>
            </tr>
            <tr>
                <td>状态</td>
                <td colspan="6">
                    <select id="edit-status" class="layui-select">
                        <option value="0">审核中</option>
                        <option value="1">审核失败</option>
                        <option value="2">审核通过</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="7">视频详情</td>
            </tr>
            <tr>
                <td colspan="7">
                    <textarea id="edit-summary" rows="4" class="layui-textarea">xxxx</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="7">
                    <button type="button" id="save-button" class="layui-btn">保存</button>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>